<!--  -->
<template>
<div class='login'>
    <div class="header">
        <img src="@/assets/images/header1.png">
    </div>
    <div class="form">
        <div class="form-item">
            <input type="text" placeholder="用户名" v-model="user_name"> 
        </div>
           <div class="form-item">
            <input type="password" placeholder="密码" v-model="user_password">
              
        </div>
           <div class="form-req">
         <router-link to="/userreqister">新用户注册 <i class="iconfont icon-jiantou2"></i></router-link>
               </div>
           <div class="form-item">
              
               <button @click="loginRequestApi">登录</button>
           
        </div>
          <div class="form-check">
               <router-link to="/phonelogin">短信登录 <i class="iconfont icon-jiantou2"></i></router-link>
              
        </div>
    </div>
</div>

</template>

<script>


export default {
components: {},
data() {
//这里存放数据
return {
    user_name:"",
    user_password:""
};
},

methods: {
  async  loginRequestApi(){
  await   this.$store.dispatch('actChangeIsLogin',{
            user_name:this.user_name,
            user_password:this.user_password
        })
            this.$router.push("/home")
    }
}
}
</script>
<style lang="less">
    .login{
        .header{
            display: flex;
            justify-content: center;
            margin-top: 3rem;
            img{
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                border: 10px solid rgba(133, 104, 104, 0.5);
            }
        }
        .form{
            width: 100%;
            height: 50rem;
            margin-left: 2rem;
            width: calc(100% - 4rem);
            .form-item{
                 margin-top: 2rem;
                input{
                    width: 100%;
                      border-radius: 5px;
                    height: 3.6rem;
                    text-indent: 1rem;
                }
                button{
                    width: 100%;
                    height: 4rem;
                    border-radius: 5px;
                    border: 0;
                    color: #fff;
                    background: #f92028;
                }
            }
              .form-check{
                margin-top: 4rem;
                display: flex;
                a{
                  width: 100%;
                    text-align: center;
                    font-size: 1.5rem;
                    color: #f92028;
                    font-weight: 500;
                }
            }
            .form-req{
                margin-top: 1rem;
                a{
                       font-size: 1.5rem;
                    color: #4b89dc;
                    font-weight: 500;
                }
            }
        }
    }
</style>